<script setup>
import { ArrowRight } from '@element-plus/icons-vue'
import { reactive, ref, watch, } from 'vue'
import { useRoute, useRouter, RouterView } from 'vue-router'
//【实现面包屑导航栏 --开始
const router = useRouter()
const route = useRoute()
const breadcrumbList = ref([])
const array = ref([1, 2, 3, 4])
const initBreadcrumbList = () => {
  breadcrumbList.value = route.matched
  // 当前路由的完整路由表
  console.log('route.matched')
  console.log(route.matched)
}
watch(
  route,
  () => {
    initBreadcrumbList()
  },
  { deep: true, immediate: true }
)
const handleRedirect = (path) => {
  router.push(path)
}
//实现面包屑导航栏 --结束】


//左侧导航栏缩放
const asideWidth = ref('200px')
console.log(asideWidth.value)
const isCollapse = ref(false)//导航栏默认展开
function closeOrOpen() {
  if (isCollapse.value) {
    isCollapse.value = false
    asideWidth.value = "200px"
    console.log(asideWidth.value)
  } else {
    isCollapse.value = true
    asideWidth.value = "100px"
    console.log(asideWidth.value)
  }
}
const handleOpen = () => {
  console.log("展开")
}
const handleClose = () => {
  console.log("缩小")
}

</script>
<template class="indexBody">
  <el-container style="height: 640px" class="mainContainer">
    <!-- 首页左侧 -->
    <el-aside class="el-Aside" width="asideWidth">
      <!-- 左侧系统Logo -->
      <el-row class="mes_logo" align="middle" justify="center">
        <el-col v-if="isCollapse" :span="22" stytle="height:100px">Mes</el-col>
        <el-col v-if="!isCollapse" :span="14">Mes系统</el-col>
      </el-row>
      <!-- 左侧菜单 -->
      <el-menu default-active="2" router active-text-color="white" background-color="#2f353f" text-color="#a7b1c2"
        class="el-menu-vertical-demo" :collapse="isCollapse" @open="handleOpen" @close="handleClose">
        <el-sub-menu index="1">
          <template #title>
            <el-icon>
              <Grid />
            </el-icon>
            <span>生产资源管理</span>
          </template>
          <el-menu-item index="/home/personnel">人员管理</el-menu-item>
          <el-menu-item index="/home/equipment">设备管理</el-menu-item>
          <el-menu-item index="/home/material">物料管理</el-menu-item>
          <el-menu-item index="/home/tray">托盘管理</el-menu-item>
          <el-menu-item index="/home/terminal">终端管理</el-menu-item>
          <el-menu-item index="/home/station">工位管理</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="2">
          <template #title>
            <el-icon>
              <Tickets />
            </el-icon>
            <span>产品定义管理</span>
          </template>
          <el-menu-item index="2-1">产品型号管理</el-menu-item>
          <el-menu-item index="2-2">产品货号管理</el-menu-item>
          <el-menu-item index="/home/processmanagement">工序管理</el-menu-item>
          <el-menu-item index="2-4">工序工位管理</el-menu-item>
          <el-menu-item index="2-5">工艺路线管理</el-menu-item>
          <el-menu-item index="2-6">产品附件类型管理</el-menu-item>
          <el-menu-item index="2-7">产品附件管理</el-menu-item>
          <el-menu-item index="2-8">线体管理</el-menu-item>
          <el-menu-item index="2-9">生产需求管理</el-menu-item>
          <el-menu-item index="2-10">排程规则管理</el-menu-item>
          <el-menu-item index="2-11">生产能力管理</el-menu-item>
          <el-menu-item index="2-12">标准工时管理</el-menu-item>
          <el-menu-item index="2-13">维修原因管理</el-menu-item>
          <el-menu-item index="2-13">延期原因管理</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="3">
          <template #title>
            <el-icon>
              <Clock />
            </el-icon>
            <span>生产调度管理</span>
          </template>
          <el-menu-item index="/home/order">订单管理</el-menu-item>
          <el-menu-item index="/home/OrderFirstInspection">订单首件管理</el-menu-item>
          <el-menu-item index="/home/order_bom">订单bom管理</el-menu-item>
          <el-menu-item index="2-4">订单排程管理</el-menu-item>
          <el-menu-item index="/home/Purchase_order">采购订单</el-menu-item>
          <el-menu-item index="2-4">订单任务管理</el-menu-item>
          <el-menu-item index="2-4">订单置顶管理</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="4">
          <template #title>
            <el-icon>
              <Unlock />
            </el-icon>
            <span>物料管理</span>
          </template>
          <el-menu-item index="/home/materialbin">物料库库位</el-menu-item>
          <el-menu-item index="/home/finishbin">成品库库位</el-menu-item>
          <el-menu-item index="/home/MBin_out">物料出库管理</el-menu-item>
          <el-menu-item index="/home/MBinInHistory">物料入库历史记录</el-menu-item>
          <el-menu-item index="/home/FBinIn">成品入库清单</el-menu-item>
          <el-menu-item index="/home/FBinInHistory">成品入库历史记录</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="5">
          <template #title>
            <el-icon>
              <Search />
            </el-icon>
            <span>质量管理</span>
          </template>
          <el-menu-item index="/home/FSHistory">首件检查历史记录</el-menu-item>
          <el-menu-item index="/home/FQAHistory">FQA历史记录</el-menu-item>
          <el-menu-item index="/home/QDHistory">质量扣留历史记录</el-menu-item>
          <el-menu-item index="/home/checkitems">检查项管理</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="6">
          <template #title>
            <el-icon>
              <Setting />
            </el-icon>
            <span>配置管理</span>
          </template>
          <el-menu-item index="2-1">Option 1</el-menu-item>
          <el-menu-item index="2-2">Option 2</el-menu-item>
          <el-menu-item index="2-3">Option 3</el-menu-item>
          <el-menu-item index="2-4">Option 4</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="7">
          <template #title>
            <el-icon>
              <Histogram />
            </el-icon>
            <span>绩效管理</span>
          </template>
          <el-menu-item index="2-1">Option 1</el-menu-item>
          <el-menu-item index="2-2">Option 2</el-menu-item>
          <el-menu-item index="2-3">Option 3</el-menu-item>
          <el-menu-item index="2-4">Option 4</el-menu-item>
        </el-sub-menu>
      </el-menu>
    </el-aside>
    <!-- 首页右侧 -->
    <el-main style="padding: 0;">
      <el-row align="middle" style="heigth:70px;" justify="space-between">
        <!-- 导航栏收缩 -->
        <el-col :span="4">
          <!-- <el-radio-button @click.native.prevent="closeOrOpen">{{status}}</el-radio-button> -->
          <span @click.native.prevent="closeOrOpen">
            <el-icon :size="30">
              <Fold v-if="!isCollapse" />
              <Expand v-if="isCollapse" />
            </el-icon>
          </span>
        </el-col>
        <el-col :span="1">
          <el-dropdown trigger="click" stytle="cursor: pointer;">
            <span class="el-dropdown-link">
              <img src="@/assets/me.jpg" class="img-circle">
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item :icon="View" style="color=black">个人中心</el-dropdown-item>
                <el-dropdown-item :icon="DArrowRight" style="color=black">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </el-col>
      </el-row>
      <!-- 面包屑导航栏 -->
      <el-row>
        <el-col :span="24">
          <el-breadcrumb :separator-icon="ArrowRight">
            <!-- to为点击跳转 title为路由中的meta属性定义的标题 -->
            <el-breadcrumb-item v-for="(breadcrumb, i) in breadcrumbList" :key="i" :to="breadcrumb.path">{{
                breadcrumb.name
            }}
            </el-breadcrumb-item>
          </el-breadcrumb>
        </el-col>
      </el-row>
      <!-- 路由跳转页面的位置 -->
      <el-row>
        <el-col :span="24">
          <RouterView />
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>
<style scoped>
.img-circle {
  border-radius: 50%;
  height: 36px;
  widows: 36px;
}

.el-Aside {
  /* background-color: black;
  color: blue; */
  background-color: #192934;
  color: #086505;
}

/* .mes_logo span {
  margin: 0 auto;
  font-size: 28px;
} */
.mes_logo .el-col {
  font-size: 28px;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>